<template>
	<view class="page">
		<global-contact></global-contact>
		<!-- 首部筛选 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="header header-top-h5">
			<!-- #endif -->
				<view class="head">
					<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png"
						mode="aspectFit"></image>
					<view class="search">
						<u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false"
							v-model="keyword"></u-search>
					</view>

					<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
					<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png"
						mode="aspectFit"></image>
				</view>
			</view>

			<!-- <view class="nav">
			<text :class="{active:navBarIndex==index}" v-for="(item,index) in newsMain" :key="index" @click="activeClick(index)">{{item.title}}</text>
		</view> -->
			<view class="con">
				<view class="con-left">
					<scroll-view scroll-y="true" class="scroll1">
						<view :class="active === 'whole' ? 'active left-item' : 'left-item'"
							@click="handleStatus('whole')">
							全部产品</view>
						<view :class="active === 'hot' ? 'active left-item' : 'left-item'" @click="handleStatus('hot')">
							热门产品
							<image src="https://www.atuanjian.com/appletStatic/static/images/u-01.png" alt="" />
						</view>
						<view v-for="(item,index) in category" :key="item.id">
							<view :class="item.check? 'active left-item' : 'left-item'" style="margin-top: 14rpx;"
								@click.stop="handleOpen(index)">
								{{item.text}}
								<view class="down" :class="{ 'checked': item.check }"></view>
							</view>
							<view class="xi-list" v-if="item.check">
								<view v-for="(childs,i) in item.child" :key="childs.id" class="item"
									@click="handleXuan(index,i)" :style="{'color':childs.check?'#FFB850':'#797979'}">
									{{childs.text}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="ul" v-if="newsMain.length>0">
					<scroll-view scroll-y="true" class="scroll1">
						<!-- 	<view class="li" v-for="(item,index) in newsMain" :key="index" @click="newsDetail(item)">
							<image :src="showImg+item.img" mode="aspectFill"></image>
							<view class="mark">
								<view class="tit">{{item.title}}</view>
								<view class="time">{{item.release_date.substring(0,11)}}</view>
							</view>
						</view> -->
						<view class="item" v-for="(item,index) in newsMain" :key="index" @click="newsDetail(item)">
							<view class="con-item">
								<view class="zhezhao"></view>
								<image :src="showImg+item.img" mode="scaleToFill"></image>
								<view class="look">
									<image src="https://www.atuanjian.com/appletStatic/static/images/u-02.png" mode="scaleToFill"></image>828
								</view>
								<view class="look share">
									<image src="https://www.atuanjian.com/appletStatic/static/images/u-03.png" mode="scaleToFill"></image>103
								</view>
								<view class="location">
									<image src="https://www.atuanjian.com/appletStatic/static/images/u-04.png" mode="scaleToFill"></image>103
								</view>
								<view class="location time">
									<image src="https://www.atuanjian.com/appletStatic/static/images/u-05.png" mode="scaleToFill"></image>103
								</view>
							</view>
							<view class="word">{{item.title}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 	<u-picker :show="showCity" :columns="cityList" @cancel="cancel1" @confirm="confirm1"></u-picker>

			<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
				@confirm="confirmSort"></u-picker> -->

		</view>
</template>

<script>
	import {
		newsShowList,
		siteSetting,
		categoryIndex
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				navBarIndex: 0,
				newsMain: [],
				showImg: '',

				// 顶部添加  搜索栏 
				keyword: '',
				priceSort: '',
				showCity: false,
				cityList: [],
				currentCity: uni.getStorageSync('webAddress'),
				showSort: false,


				catId: '',
				page: 0,
				typeId: '',
				searchName: '',

				totalPage: 1,
				sortList: [
					[{
						label: '默认排序',
						value: ''
					}, {
						label: '浏览量低到高',
						value: 'asc'
					}, {
						label: '浏览量高到低',
						value: 'desc'
					}]
				],
				newUrl: '',
				category: [],
				active: 'whole'
			}
		},
		methods: {
			handleOpen(index) {
				this.active = ''
				this.category[index].check = !this.category[index].check
				this.$forceUpdate()
			},
			handleXuan(index, i) {
				// 将其他子分类项的状态设为 false
				this.category.forEach((categoryItem) => {
					if (categoryItem.child && categoryItem.child.length > 0) {
						categoryItem.child.forEach((childItem) => {
							childItem.check = false;
						});
					}
				});
				this.category[index].child[i].check = true;
				this.catId = this.category[index].child[i].id;
				this.page = 0
				this.newsMain = []
				this.getNewsList()
			},
			handleStatus(status) {
				this.active = status
				this.typeId = ''
				this.page = 0
				this.newsMain = []
				this.category.forEach((item) => {
					item.check = false;
					if (item.child && item.child.length > 0) {
						item.child.forEach((child) => {
							child.check = false;
						});
					}
				});
				this.getNewsList()
			},
			// 首页category 轮播导航
			async categoryIndex() {
				return await categoryIndex()
			},
			getCategory() {
				this.categoryIndex().then(res => {
					// this.navList=[res.menu]
					res.menu.forEach(val => {
						if (val.id == 31) {
							this.catId = val.child[0].id
							this.getNewsList()
							if (val.hasOwnProperty('child')) {
								val.child.forEach(val => {
									Object.assign(val, {
										check: false
									})
								})
								this.category = []
								this.category.push(val)
								this.defaultList = JSON.parse(JSON.stringify(this.category))
							}
						}
					})

				}).catch(err => {})
			},

			// 添加 搜搜兰 需要的内容
			changeSort() {
				this.showSort = true
			},
			cancelSort() {
				this.showSort = false
			},
			confirmSort(e) {
				this.priceSort = e.value[0].value
				this.showSort = false
				this.page = 0
				this.newsMain = []
				this.getNewsList()
			},
			async siteSetting() {
				return await siteSetting()
			},
			getSetting() {
				this.siteSetting().then(res => {
					uni.setStorageSync('webAddress', res.default_substation)
					// this.currentCity=res.default_substation
					if (res.city && res.city.length > 0) {
						this.cityList.push(res.city)
					}
					// this.defaultMethods()
				})
			},

			cancel1() {
				this.showCity = false
			},
			confirm1(event) {
				uni.setStorageSync('webAddress', event.value[0])
				this.currentCity = event.value[0]
				this.showCity = false
				this.page = 0
				this.newsMain = []
				this.getNewsList()
			},

			chooseCity() {
				this.showCity = true
				// uni.showToast({
				// 	icon:'loading',
				// 	title:'正在研发中...'
				// })
			},
			search() {
				if (!this.keyword.trim()) {
					uni.showToast({
						icon: 'none',
						title: '请输入关键词'
					})
					return;
				}
				this.catId = ''
				this.page = 0
				this.newsMain = []

				// #ifdef H5
				var redirectToUrl = this.$route.fullPath;
				if (this.$route.query['search']) {
					redirectToUrl = redirectToUrl.replace('search=' + this.$route.query['search'], 'search=' + this
						.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&search=${this.keyword}`; // 携带参数
				}
				if (this.$route.query['keywords']) {
					redirectToUrl = redirectToUrl.replace('keywords=' + this.$route.query['keywords'], 'keywords=' + this
						.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&keywords=${this.keyword}`; // 携带参数
				}
				uni.redirectTo({
					url: redirectToUrl
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.getNewsList()
				// #endif
			},

			filtrate() {
				// uni.setStorageSync('mark_id','5')
				uni.navigateTo({
					url: '/pagesB/annualMeeting/filtrateNew?categoryId=5'
				})
			},
			// ***********************************
			newsDetail(item) {
				uni.navigateTo({
					url: '/pagesA/detail/news?id=' + item.id
				})
			},
			activeClick(index) {
				if (this.navBarIndex != index) {
					this.navBarIndex = index
				}
			},
			// 新闻动态
			async newsShowList(data) {
				return await newsShowList(data)
			},
			getNewsList() {
				console.log('getNewsList:', this.catId)
				const data = {
					p: this.page,
					n: 10,
					catid: this.catId,
					// typeId:this.typeId,
					search: this.searchName,
					sort: this.priceSort
				}

				console.log('当前参数', data)
				this.newsShowList(data).then(res => {
					this.totalPage = Math.ceil(res.count / 10)
					this.newsMain.push(...res.list)
				}).catch(err => {
					// console.log(err)
				})
			},
		},
		onLoad(option) {
			console.log('接收参数', option)
			this.catId = option.id
			this.showImg = this.$config.showImgApi;
			if (option.keywords) {
				this.keyword = option.keywords
			}

			this.getSetting()
			this.getCategory()
			if (option.title_text) {
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: option.title_text // 自定义标题内容
				})
			}
		},
		onShow() {
			// newsID
			if (uni.getStorageSync('newsID')) {
				this.searchName = ''
				this.catId = uni.getStorageSync('newsID')
				uni.removeStorageSync('newsID')
				this.page = 0
				this.newsMain = []
				console.log('this.typeId', this.typeId)
				this.getNewsList()
			}
		},
		onReachBottom() {
			if (this.page < this.totalPage - 1) {
				this.page++
				this.getNewsList();
			}
		},
		onShareAppMessage() {}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F2F2F2;

		.scroll1 {
			height: 90vh; // vh+
		}

		.con {
			display: flex;
			margin-top: 108rpx;
			padding-top: 10px;

			.con-left {
				margin-right: 16rpx;
				width: 180rpx;

				.active {
					background: #FFB850 !important;
					color: #fff;
				}

				.left-item {
					height: 77rpx;
					background: #FFFFFF;
					line-height: 77rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;

					image {
						width: 32rpx;
						height: 37rpx;
						margin-left: 4rpx;
					}

					.down {
						width: 0;
						height: 0;
						border: 12rpx solid transparent;
						margin-left: 20rpx;
						margin-top: 12rpx;
						border-top: 12rpx solid #797979;
					}

					.checked {
						margin-top: -12rpx;
						border-top: 12rpx solid #fff;
						transform: rotate(180deg);
					}
				}
			}
		}

		.xi-list {
			background-color: #fff;

			.item {
				padding: 16rpx 0;
				text-align: center;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}

	.nav {
		@include flex_style(flex-start, center, row nowrap);
		background-color: #E9E9E9;

		text {
			flex: 1;
			text-align: center;
			line-height: 72rpx;
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal;
			color: #666666;
		}

		.active {
			background-color: #FFB850;
			color: #FFFFFF;
		}
	}

	.ul {
		.item {
			margin-bottom: 40rpx;
			width: 534rpx;
			.word {
				background-color: #FFFFFF;
				text-indent: 0.5em;
				font-size: 26rpx;
				padding: 10px 0;
			}

			.con-item {
				position: relative;
				height: 269rpx;
				border-radius: 12px;
				overflow: hidden;

				.zhezhao {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					// background: rgba(0, 0, 0, 0.6);
					z-index: 1;
				}

				.look {
					width: 100rpx;
					overflow: hidden;
					position: absolute;
					top: 20rpx;
					right: 120rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					z-index: 9;
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 28rpx;
						height: 18rpx;
					}
				}

				.location {
					width: 100rpx;
					overflow: hidden;
					position: absolute;
					bottom: 20rpx;
					left: 10px;
					font-size: 20rpx;
					color: #FFFFFF;
					z-index: 9;
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}

				.time {
					bottom: 20rpx;
					left: 60px;
				}

				.share {
					top: 20rpx;
					right: 0rpx;
					z-index: 9;
				}
			}
		}
	}

	.header {
		background: #FFB850;
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;

		.head {
			@include flex_style(space-between, center, row nowrap);
			padding: 16rpx 22rpx 16rpx 30rpx;

			.local {
				@include flex_style(flex-start, center, row nowrap);

				text {
					display: block;
					max-width: 85rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 38rpx;
					color: #FFFFFF;
				}

				.trang {
					width: 0;
					height: 0;
					border-left: 7rpx solid transparent;
					border-right: 7rpx solid transparent;
					border-top: 10rpx solid #FFFFFF;
					margin-left: 8rpx;
				}
			}

			.search {
				flex: 1;
				height: 56rpx;

				::v-deep.u-search__content {
					background-color: #F5F5F5 !important;
					border-width: 0;
				}

				::v-deep.u-search__content__input {
					height: 56rpx !important;
					background-color: #F5F5F5 !important;
					border-width: 0;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

		}
	}
</style>